<!DOCTYPE html>
<html lang="en">
<!--导入定义的变量-->
<#include "common/virs.ftl" />
<head>
    <meta charset="UTF-8">
    <title>搜索</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="hyblog,博客,杨德明,杨德明的个人博客,it,技术">
    <meta name="description" content="站长专注于java开发，高并发、高可用、分布式……">
    <link rel="shortcut icon" href="./static/pic/favicon.ico">
    <link rel="stylesheet" href="${layui_css}">
    <link rel="stylesheet" href="${main_css}">
    <!-- 字体 -->
    <link rel="stylesheet" href="${font_awesome_css}">
    <!--动画-->
    <link href="${animate_css}" rel="stylesheet">
</head>
<body>
<!--整体容器-->
<div class="hy-blog">
    <!--导航条导入-->
    <#include "templates/nav.html" />

    <!-- 主体内容 -->
    <div class="layui-container">
        <div class="layui-row">
            <!--主体内容-->
            <div class="layui-col-xs12 animated fadeInLeft">
                <!--最外层warp-->
                <div class="search-warp">
                    <!--表单-->
                    <form class="layui-form layui-form-pane" action="/gosearch" method="post">
                        <div class="layui-form-item" style="width: calc(250px);margin: 0 auto;">
                            <div class="layui-input-inline">
                                <input type="text" name="keyword" lay-verify="required" placeholder="请输入要搜索的内容" autocomplete="off" class="layui-input">
                            </div>
                            <button class="layui-btn" lay-submit="" lay-filter="demo2"><i class="fa fa-search" aria-hidden="true"></i></button>
                        </div>
                    </form>
                    <!--搜索结果-->
                    <div class="search-result">
                        <#if articleList??>
                            <#list articleList as article>
                                <div class="result-item">
                                    <h2 class="title"><a id="article_search" href="/details?aid=${article.aid}">${article.title}</a></h2>
                                    <div class="layui-row">
                                        <div class="layui-col-xs12">
                                            <div class="desc">
                                                ${article.summary}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="data">
                                        <span><i class="fa fa-calendar" aria-hidden="true"></i> ${article.createTime?string('yy/MM/dd HH:mm:ss')}</span>
                                        <span><i class="fa fa-thumbs-o-up" aria-hidden="true"></i> ${article.votes}</span>
                                        <span><i class="fa fa-eye" aria-hidden="true"></i> ${article.hits}</span>
                                    </div>
                                </div>
                            </#list>
                        </#if>
                    </div>
                    <!--分页-->
                    <div style="text-align: center;">
                        <div id="paging" style="display: inline;"></div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <!-- 主体内容end -->

    <!--导入footer-->
    <#include "templates/foot.html" />
</div>
<script src="${layui_js}"></script>
<script>
    layui.use(['element', 'laypage','jquery','layer'], function () {
        var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
        var laypage = layui.laypage;
        var $ = layui.jquery;
        var layer = layui.layer;

        //给【搜索】添加layui-this的样式
        $("#nav-search").addClass("layui-this");

        //监听导航点击
        element.on('nav(demo)', function (elem) {
            //console.log(elem)
            layer.msg(elem.text());
        });

        //执行一个laypage实例
        laypage.render({
            elem: 'paging'
            ,curr : ${page}
            ,count: ${allNums} //数据总数，从服务端得到
            ,jump: function(obj, first){
                //obj包含了当前分页的所有参数，比如：
                //console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                //console.log(obj.limit); //得到每页显示的条数
                //首次不执行
                if(!first){
                    window.location.href="/gosearch?keyword=${keyword}&page="+obj.curr+"&limit="+obj.limit;
                }
            }
        });

        <#if tip??>
        layer.alert("${tip}");
        </#if>


    });
</script>
</body>
</html>